<template>
  <div class="EZ">
    <!-- 市场洞察 产品分析 -->
    <div class="topBanner">
      <br />

      <!-- <div class="search_button"></div> -->
      <div>
        <div style="margin: 0 auto; width: 850px; font-size: 22px; color: #fff">
          市场洞察·产品分析
        </div>
        <div class="search_input">
          <input class="inputt" v-model="from.product_name" style="border: 0" type="text" placeholder="" />
          <button class="btnn" @click="souSearch()">
            <img src="../../assets/img/sousuo.png" style="width: 21px; height: 21px" />
            查询
          </button>
        </div>
      </div>
    </div>

    <div class="echarts">
      <!-- 产品大数据分析 -->
      <div class="Data">
        <div class="top">
          <div class="df" style="justify-content: space-between">
            <div class="df">
              <img src="../../assets/img/大数据.png" alt="" />
              <div class="text">产品大数据分析</div>
            </div>
            <!-- 表单 -->
            <div>
              <el-form :model="form" label-width="120px">
                <div class="df">
                  <!-- 地区选择 -->
                  <!-- <el-select
                    v-model="from.value"
                    class="m-2"
                    placeholder="全部地区"
                    style="width: 180px; margin-right: 10px"
                    @change="cityChange()"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.adcode"
                      :label="item.label"
                      :value="item.adcode"
                    />
                  </el-select> -->
                  <!--  -->
                  <el-cascader v-model="proPtions" style="width: 180px; margin-right: 10px" :options="options"
                    :props="props" collapse-tags clearable @change="recognize6" />

                  <!-- 日期选择 -->
                  <div class="block" style="margin-right: 10px; display: flex">
                    <el-date-picker v-model="from.onTime" type="daterange" unlink-panels range-separator="-"
                      start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY/MM/DD" :disabled-date="disabledDate"
                      value-format="x" @change="recognize7" />

                    <div style="width: 36px; height: 36px; margin-left: 10px">
                      <img src="../../assets/img/show.png" alt="" style="width: 100%; height: 100%" @click="show()" />
                    </div>
                  </div>
                </div>
              </el-form>
            </div>
          </div>
          <!-- 表单 -->
          <div v-if="aaShow">
            <el-form :model="form" label-width="120px">
              <div class="df" style="margin-top: 24px">
                <!-- 全部采购商类型 -->
                <el-select v-model="from.cgs" multiple placeholder="全部采购商类型" style="width: 180px; margin-right: 10px">
                  <el-option v-for="item in biddingBoos" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
                <!-- 全部品牌 -->
                <el-input v-model="from.pinpai" placeholder="全部品牌" style="width: 160px; margin-right: 10px" />

                <!-- 搜索范围 -->
                <!-- <el-select
                  v-model="from.ssfw"
                  class="m-2"
                  placeholder="搜索范围"
                  style="width: 180px; margin-right: 10px"
                >
                  <el-option
                    v-for="item in realm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select> -->

                <!-- 匹配模式 -->
                <!-- <el-select
                  v-model="from.ppms"
                  class="m-2"
                  placeholder="匹配模式"
                  style="width: 180px; margin-right: 10px"
                >
                  <el-option
                    v-for="item in Match"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select> -->

                <!-- 排除词 -->
                <!-- <el-select
                  v-model="from.pcc"
                  class="m-2"
                  placeholder="排除词"
                  style="width: 180px; margin-right: 10px"
                >
                  <el-option
                    v-for="item in byword"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select> -->

                <!-- 包含词 -->
                <!-- <el-select
                  v-model="from.bhc"
                  class="m-2"
                  placeholder="包含词"
                  style="width: 180px; margin-right: 10px"
                >
                  <el-option
                    v-for="item in byword"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select> -->
                <el-button type="primary" size="mini" class="mr10" style="height: 32px" @click="fenxi()">
                  搜索
                </el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>

      <!-- 中招标分析 -->
      <div class="analysis">
        <!-- tab标签页 -->
        <div>
          <el-tabs v-model="activeName" class="demo-tabs">
            <!-- 中招标分析 -->
            <el-tab-pane label="中招标分析" name="first">
              <template #label>
                <span class="custom-tabs-label">
                  <div class="ico" v-if="activeName=='first'"><img src="../../assets/img/路径 4204@2x.png" alt=""></div>
                  <div class="ico" v-else><img src="../../assets/img/路径 5184@2x.png" alt=""></div>
                  <span>中招标分析</span>
                </span>
              </template>
              <!-- 数据概览 -->
              <div class="overview">
                <!-- 文字 -->
                <div style="height: 56px; border-bottom: 1px solid #eee">
                  <div class="df" style="padding-top: 20px">
                    <span class="xian"></span>
                    <span class="text">数据概览</span>
                  </div>
                </div>
                <!-- 背景图片展示 -->
                <div class="bacBox">
                  <div class="baCorder">
                    <div class="cart">采购次数（次）</div>
                    <div class="num" v-for="item in numDatas" :key="item" @click="dialogVisible = true">
                      <div class="dfac">
                        <span>{{ item }}</span>
                        <el-icon>
                          <CaretRight />
                        </el-icon>
                      </div>
                    </div>
                  </div>

                  <div class="bacInd">
                    <div class="cart">采购总金额（亿）</div>
                    <div class="num dfac" @click="dialogVisible = true">
                      <span v-for="item in numDatas3" :key="item">
                        {{ item }}
                      </span>
                      <el-icon>
                        <CaretRight />
                      </el-icon>
                    </div>
                    <!-- <div class="num">80</div> -->
                  </div>

                  <div class="bacfamily1">
                    <div class="cart">品牌（个）</div>
                    <div class="num" v-for="item in numDatas4" :key="item">
                      {{ item }}
                    </div>
                  </div>

                  <div class="bacBillion">
                    <div class="cart">供应商数量（家）</div>
                    <div class="num" v-for="item in numDatas2" :key="item">
                      <div class="dfac">
                        <span>{{ item }}</span>
                        <!-- <el-icon>
                          <CaretRight />
                        </el-icon> -->
                      </div>
                    </div>
                  </div>

                  <div class="bacfamily2">
                    <div class="cart">采购商数量（家）</div>
                    <div class="num sheng" v-for="item in numDatas1" :key="item">
                      <div class="dfac">
                        <span>{{ item }}</span>
                        <!-- <el-icon>
                          <CaretRight />
                        </el-icon> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 市场规模 -->
              <div class="scale">
                <!-- 文字 -->
                <div style="height: 56px; border-bottom: 1px solid #eee">
                  <div class="df" style="padding-top: 20px; justify-content: space-between">
                    <div class="df">
                      <span class="xian"></span>
                      <span class="text">市场规模</span>
                    </div>
                    <!-- 按照年，月，日等不同时间范围选择，加载echarts图报表 -->
                    <div style="margin-right: 20px; margin-top: -10px">
                      <el-select v-model="Array1" placeholder="按月" style="width: 140px" @change="loadChart">
                        <el-option v-for="item in Ranking" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                  </div>
                </div>
                <!-- 柱形图 -->
                <div id="main" ref="chart" style="width: 95%; height: 85%"></div>
              </div>

              <!-- 市场供需数量 -->
              <div class="scale">
                <!-- 文字 -->
                <div style="height: 56px; border-bottom: 1px solid #eee" class="df1">
                  <div class="df" style="padding-top: 20px">
                    <span class="xian"></span>
                    <span class="text">市场供需数量</span>
                  </div>
                  <!-- 按照年，月，日等不同时间范围选择，加载echarts图报表 -->
                  <div style="margin-right: 20px; margin-top: -10px">
                    <el-select v-model="Array2" placeholder="按月" style="width: 140px" @change="loadChart">
                      <el-option v-for="item in Ranking" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                </div>
                <!-- 柱形图 -->
                <div id="main1" style="width: 95%; height: 85%"></div>
              </div>
              <!-- 市场地域分布 -->
              <div>
                <div class="translate" style="position: relative">
                  <a-tabs v-model:activeKey="activeKey" class="ml10" type="card">
                    <a-tab-pane key="1" tab="采购次数排行">
                      <MapChina></MapChina>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="采购金额排行">
                      <MapTabChina></MapTabChina>
                    </a-tab-pane>
                  </a-tabs>
                  <div style="
                      position: absolute;
                      left: 5px;
                      top: 15px;
                      display: flex;
                    ">
                    <div class="xian"></div>
                    <div class="ml10">市场地域分布</div>
                  </div>
                </div>
              </div>

              <!-- 各类采购商采购次数占比大盒子 -->
              <div class="nBox">
                <!-- 各类采购商采购次数占比 -->
                <div class="left_bing" style="position: relative">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div style="display: flex; padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">各类采购商采购次数占比</span>
                    </div>
                  </div>
                  <el-tabs v-model="activeName1" type="card" class="demo-tabs">
                    <el-tab-pane label="饼图" name="third">
                      <!-- 饼图 -->
                      <div id="Pie" style="width: 600px; height: 400px"></div>
                    </el-tab-pane>
                    <el-tab-pane label="列表" name="fourth">
                      <!-- 表格 -->
                      <el-table :data="tableData" style="width: 100%" max-height="420">
                        <el-table-column fixed prop="key" label="采购商名称" />
                        <el-table-column prop="doc_count" label="采购次数" />
                        <!-- <el-table-column prop="address" label="所占比例" /> -->
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                  <div style="position: absolute; right: 40px; top: 20px">
                    <!-- <span>新建</span>
                    <span>管理</span> -->
                  </div>
                </div>

                <!-- 各类采购商采购金额占比 -->
                <div class="right_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div style="display: flex; padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">各类采购商采购金额占比</span>
                    </div>
                  </div>
                  <el-tabs v-model="activeName2" type="card" class="demo-tabs">
                    <el-tab-pane label="饼图" name="third">
                      <!-- 饼图 -->
                      <div id="Pie1" style="width: 600px; height: 400px"></div>
                    </el-tab-pane>
                    <el-tab-pane label="列表" name="fourth">
                      <!-- 表格 -->
                      <el-table :data="tableData1" style="width: 100%" max-height="400">
                        <el-table-column prop="key" label="采购商名称" />
                        <el-table-column prop="color_sum_price" label="采购次数(万)">
                          <template #default="scope">
                            {{ (scope.row.color_sum_price / 100000).toFixed() }}
                          </template>
                        </el-table-column>
                        <!-- <el-table-column prop="address" label="所占比例" /> -->
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>

              <!-- 主要品牌分布大盒子 -->
              <div class="numberBox1">
                <!-- 主要品牌分布 -->
                <div class="left_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">主要品牌分布</span>
                    </div>
                  </div>
                  <el-tabs v-model="activeName3" type="card" class="demo-tabs">
                    <el-tab-pane label="饼图" name="third">
                      <!-- 饼图 -->
                      <div id="Pie2" style="width: 600px; height: 500px"></div>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="列表" name="fourth">
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        max-height="400"
                      >
                        <el-table-column fixed prop="key" label="采购商名称" />
                        <el-table-column prop="doc_count" label="采购次数" />
                      </el-table>
                    </el-tab-pane> -->
                  </el-tabs>
                </div>

                <!-- 品牌销量 -->
                <div class="right_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">品牌销量</span>
                    </div>
                  </div>
                  <!-- 表格 -->
                  <!-- 表格数据 -->
                  <el-table :data="data5" :header-cell-style="{
            textAlign: 'center',
          }" max-height="460">
                    <el-table-column label="名称" type="index" width="57px" align="center">
                      <template #default="scope">
                        <span v-if="scope.$index + 1 == 1">
                          <img src="../../assets/img/top1.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 2">
                          <img src="../../assets/img/top2.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 3">
                          <img src="../../assets/img/top3.png" class="ranking" />
                        </span>
                        <div class="topS" v-else>
                          {{ scope.$index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="key" label="" show-overflow-tooltip />
                    <el-table-column prop="caigou_num" label="成交数量" show-overflow-tooltip align="center" />
                    <el-table-column prop="jg_num" sortable label="成交总金额(万元)" align="center">
                      <template #default="scope">
                        {{ (scope.row.jg_num / 10000).toFixed(1) }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <!-- 采购商排行大盒子 -->
              <div class="Purchaser" style="margin-top: 10px">
                <!-- 采购商排行 -->
                <div class="left_1">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">采购商排行</span>
                      <div>
                        <img src="../../assets/img/TOP10.png" class="Top10" />
                      </div>
                    </div>
                  </div>

                  <!-- 表格数据 -->
                  <el-table :data="data">
                    <el-table-column label="名称" type="index" width="57px" align="center">
                      <template #default="scope">
                        <span v-if="scope.$index + 1 == 1">
                          <img src="../../assets/img/top1.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 2">
                          <img src="../../assets/img/top2.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 3">
                          <img src="../../assets/img/top3.png" class="ranking" />
                        </span>
                        <div class="topS" v-else>
                          {{ scope.$index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="key" label="" width="170" show-overflow-tooltip>
                      <template #default="{ row }">
                        <div @click="Purchaserinfo(row.key)">
                          {{ row.key }}
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="" label="" align="center">
                      <template #default="scope">
                        <div style="color: #3ea187">{{ scope.row.name }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="doc_count" label="采购次数" align="center" style="margin-right: 10px">
                    </el-table-column>
                  </el-table>
                </div>

                <!-- 供应商排行 -->
                <div class="center_1">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">供应商排行</span>
                      <div>
                        <img src="../../assets/img/TOP10h.png" class="Top10" />
                      </div>
                    </div>
                  </div>
                  <!-- 表格数据 -->
                  <el-table :data="data1">
                    <el-table-column label="名称" type="index" width="57px" align="center">
                      <template #default="scope">
                        <span v-if="scope.$index + 1 == 1">
                          <img src="../../assets/img/top1.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 2">
                          <img src="../../assets/img/top2.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 3">
                          <img src="../../assets/img/top3.png" class="ranking" />
                        </span>
                        <div class="topS" v-else>
                          {{ scope.$index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="key" label="" width="170" show-overflow-tooltip>
                      <template #default="{ row }">
                        <div @click="Supplierinfo(row.key)">
                          {{ row.key }}
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="" label="" align="center">
                      <template #default="{ row }">
                        <div style="color: #3ea187">{{ row.name }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="doc_count" label="中标次数" align="center" />
                  </el-table>
                </div>

                <!-- 招标代理机构排行 -->
                <div class="right_1">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">招标代理机构排行</span>
                      <div>
                        <img src="../../assets/img/TOP10red.png" class="Top10" />
                      </div>
                    </div>
                  </div>
                  <!-- 表格数据 -->
                  <el-table :data="data2">
                    <el-table-column label="名称" type="index" width="57px" align="center">
                      <template #default="scope">
                        <span v-if="scope.$index + 1 == 1">
                          <img src="../../assets/img/top1.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 2">
                          <img src="../../assets/img/top2.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 3">
                          <img src="../../assets/img/top3.png" class="ranking" />
                        </span>

                        <div class="topS" v-else>
                          {{ scope.$index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="key" label="" width="170" show-overflow-tooltip>
                      <template #default="{ row }">
                        <div @click="Agencyinfo(row.key)">
                          {{ row.key }}
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column>
                      <template #default="scope">
                        <div style="color: #3ea187">{{ scope.row.name }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="doc_count" label="代理次数" align="center" />
                  </el-table>
                </div>
              </div>
            </el-tab-pane>

            <!-- 销量分析 -->
            <el-tab-pane label="销量分析" name="second">
              <template #label>
                <span class="custom-tabs-label">
                  <div class="ico" v-if="activeName=='second'"><img src="../../assets/img/组 7530@2x.png" alt=""></div>
                  <div class="ico" v-else><img src="../../assets/img/组 5145@2x.png" alt=""></div>
                  <span>销量分析</span>
                  <img src="../../assets/newimg/beta.png" alt="" style="width: 31px; height: 14px; margin-left: 4px" />
                </span>
              </template>
              <!-- 数据概览 -->
              <div class="overview">
                <!-- 文字 -->
                <div style="height: 56px; border-bottom: 1px solid #eee">
                  <div class="df" style="padding-top: 20px">
                    <span class="xian"></span>
                    <span class="text">数据概览</span>
                  </div>
                </div>
                <!-- 背景图片展示 -->
                <div class="bacBox">
                  <div class="baCorder">
                    <div class="cart">成交次数（次）</div>
                    <div class="num" @click="dialogVisible = true" v-for="item in numData" :key="item">
                      <div class="dfac">
                        <span>{{ item }}</span>
                        <el-icon>
                          <CaretRight />
                        </el-icon>
                      </div>
                    </div>
                  </div>

                  <div class="bacInd">
                    <div class="cart">采购总金额（亿）</div>
                    <div class="num dfac" @click="dialogVisible = true">
                      <span v-for="item in numData3" :key="item">
                        {{ item }}
                      </span>
                      <el-icon>
                        <CaretRight />
                      </el-icon>
                    </div>

                    <!-- <div class="num">80</div> -->
                  </div>

                  <div class="bacfamily1">
                    <div class="cart">品牌（个）</div>
                    <div class="num" v-for="item in numData4" :key="item">
                      {{ item }}
                    </div>
                  </div>

                  <div class="bacBillion">
                    <div class="cart">供应商数量（家）</div>
                    <div class="num" v-for="item in numData2" :key="item">
                      {{ item }}
                    </div>
                  </div>

                  <div class="bacfamily2">
                    <div class="cart">采购商数量（家）</div>
                    <div class="num sheng" v-for="item in numData1">
                      {{ item }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- 成交总金额趋势 -->
              <div class="scale">
                <!-- 文字 -->
                <div style="height: 56px; border-bottom: 1px solid #eee" class="df1">
                  <div class="df" style="padding-top: 20px">
                    <span class="xian"></span>
                    <span class="text">成交总金额趋势</span>
                  </div>
                  <!-- 按照年，月，日等不同时间范围选择，加载echarts图报表 -->
                  <div style="margin-right: 20px; margin-top: -10px">
                    <el-select v-model="Array3" placeholder="按月" style="width: 140px" @change="loadChart">
                      <el-option v-for="item in Ranking" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                </div>
                <!-- 折线图 -->
                <div id="zhexian" style="width: 1140px; height: 408px"></div>
              </div>

              <!-- 列表 品牌销量 -->
              <div class="numberBox" style="margin-top: 10px">
                <div class="left_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">品牌销量</span>
                    </div>
                  </div>
                  <!-- 表格 -->
                  <!-- 表格数据 -->
                  <el-table :data="data4">
                    <el-table-column label="名称" type="index" width="57px" align="center">
                      <template #default="scope">
                        <span v-if="scope.$index + 1 == 1">
                          <img src="../../assets/img/top1.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 2">
                          <img src="../../assets/img/top2.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 3">
                          <img src="../../assets/img/top3.png" class="ranking" />
                        </span>
                        <div class="topS" v-else>
                          {{ scope.$index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="key" label="" />

                    <el-table-column prop="zb_num" sortable label="成交数量" align="center" />
                    <el-table-column prop="jg_sum" sortable label="成交总金额(万元)" align="center">
                      <template #default="scope">
                        {{ (scope.row.jg_sum / 10000).toFixed(1) }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <div class="right_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">供应商销量</span>
                    </div>
                  </div>
                  <!-- 表格 -->
                  <!-- 表格数据 -->
                  <el-table :data="data4">
                    <el-table-column label="名称" type="index" width="57px" align="center">
                      <template #default="scope">
                        <span v-if="scope.$index + 1 == 1">
                          <img src="../../assets/img/top1.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 2">
                          <img src="../../assets/img/top2.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 3">
                          <img src="../../assets/img/top3.png" class="ranking" />
                        </span>
                        <div class="topS" v-else>
                          {{ scope.$index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="key" label="" />

                    <el-table-column prop="zb_num" sortable label="成交数量" align="center" />
                    <el-table-column prop="jg_sum" sortable label="成交总金额(万元)" align="center">
                      <template #default="scope">
                        {{ (scope.row.jg_sum / 10000).toFixed(1) }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <div class="numberBox2">
                <!-- 主要品牌成交总金额占比 -->
                <div class="left_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">主要品牌成交总金额占比</span>
                    </div>
                  </div>
                  <!-- 饼图 -->
                  <div id="Amount" style="width: 600px; height: 500px"></div>
                </div>

                <!-- 主要品牌成交数量占比 -->
                <div class="right_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">主要品牌成交数量占比</span>
                    </div>
                  </div>
                  <!-- 饼图 -->
                  <div id="AmountNum" style="width: 600px; height: 500px"></div>
                </div>
              </div>

              <!-- footer -->
              <div class="numberBox1" style="margin-top: 10px">
                <!-- 各类采购商成交总金额分布 -->
                <div class="left_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">各类采购商成交总金额分布</span>
                    </div>
                  </div>
                  <!-- 饼图 -->
                  <!-- 饼图 -->
                  <div id="Number" style="width: 600px; height: 500px"></div>
                </div>

                <!-- 品牌销量 -->
                <div class="right_bing">
                  <!-- 文字 -->
                  <div style="height: 56px; border-bottom: 1px solid #eee">
                    <div class="df" style="padding-top: 20px">
                      <span class="xian"></span>
                      <span class="text">采购商排行</span>
                    </div>
                  </div>
                  <!-- 表格 -->
                  <!-- 表格数据 -->
                  <el-table :data="data3" :header-cell-style="{
            textAlign: 'center',
          }">
                    <el-table-column label="排名" type="index" width="57px" align="center">
                      <template #default="scope">
                        <span v-if="scope.$index + 1 == 1">
                          <img src="../../assets/img/top1.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 2">
                          <img src="../../assets/img/top2.png" class="ranking" />
                        </span>
                        <span v-else-if="scope.$index + 1 == 3">
                          <img src="../../assets/img/top3.png" class="ranking" />
                        </span>
                        <div class="topS" v-else>
                          {{ scope.$index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="doc_count" sortable align="center" label="成交数量" />
                    <el-table-column prop="caigou_num.value" sortable align="center" label="成交总金额(万元)" />
                  </el-table>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- <br style="clear: both" /> -->
  </div>

  <!-- 弹出框 -->
  <el-dialog v-model="dialogVisible" title="项目列表" width="1000">
    <!-- <div class="mb20 ml10">
      <span>共</span>
      <span>96409</span> 次 <span>服务器</span> <span>等相关招标</span>
    </div> -->
    <!-- table表格 -->
    <div class="ml50">
      <el-table :data="tableData2" style="width: 95%">
        <el-table-column prop="" label="公司名称">
          <template #default="{ row }"> {{ row.name }}</template>
        </el-table-column>
        <el-table-column prop="2" label="相关产品" />
        <el-table-column prop="3" label="品牌" />
        <el-table-column prop="1" label="项目金额" />
        <el-table-column prop="2" label="项目地区" />
        <el-table-column prop="3" label="发布时间" />
      </el-table>
    </div>
    <template #footer>
      <!-- 分页 -->
      <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" :total="1000" background />
      </div>
    </template>
  </el-dialog>

  <!-- 底部 -->
  <footer>
    <fot></fot>
  </footer>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
import * as echarts from "echarts";
import { useRouter, useRoute } from "vue-router";
import domData from "../../utils/json/dom.json";
import {
  MarketSize,
  MarketNum,
  MarketProportion,
  MarketMoney,
  MarketPurchaser,
  MarketSupplier,
  MarketAgency,
  salesanalysisOverview,
  salesanalysisOverview1,
  salesanalysisMoney,
  salesanalysisTotalamount,
  salesanalysisPurchaser,
  salesanalysisPNumber,
  MarketPin,
} from "../../Api/market/index";
import fot from "../../components/fotter/index.vue";
import {money1} from "../../utils/index";
import MapChina from "../../components/Map/Map.vue";
import MapTabChina from "../../components/Map/MapTabs.vue";
// import { ElMessage, ElMessageBox } from "element-plus";

import "../../assets/com/com.scss";
// token加密
const router = useRouter();
// const token = localStorage.getItem("token");

// 字段
const from = reactive({
  product_name: "阀门", //阀门
  // value: "", //全部地区
  onTime: [], //开始时间
  cgs: [], //采购商类型
  pinpai: "", //品牌
  ssfw: "", //搜索范围
  ppms: "", //匹配模式
  pcc: "", //排除词
  bhc: "", //包含词
  lable: "", //输入框数据
  leave: [], //省
  market: [], //市
  quarter: [], //区
});

// 柱形图
const mapData = ref<number[]>([]);
const mapDataTime = ref<string[]>([]);
const mapDatajg = ref<number[]>([]);
const mapData1 = ref<number[]>([]);
const mapDataTime1 = ref<string[]>([]);
const mapDatajg1 = ref<number[]>([]);
const mapDataTime2 = ref<string[]>([]);
const mapDatajg2 = ref<number[]>([]);

// tabs
const activeName = ref("first");
const activeName1 = ref("third");
const activeName2 = ref("third");
const activeName3 = ref("third");
const activeKey = ref("1");
const input = ref("");

//表格数据
const tableData = ref([]);
const tableData1 = ref([]);
const tableData2 = [
  {
    name: "2016-05-03",
    2: "Tom",
    3: "No. 189,",
  },
];
const data = ref([]);
const data1 = ref([]);
const data2 = ref([]);
const data3 = ref([]);
const data4 = ref([]);
const data5 = ref([]);

// 地区
let options = [];
let proPtions = ref([]);
let children2 = ref([]);
let children3 = ref([]);
let diquArr = ref([]);

//数据概览
const numData = ref([]);
const numData1 = ref([]);
const numData2 = ref([]);
const numData3 = ref([]);
const numData4 = ref([]);
const numDatas = ref([]);
const numDatas1 = ref([]);
const numDatas2 = ref([]);
const numDatas3 = ref([]);
const numDatas4 = ref([]);

//按年月日排序
const Array1 = ref();
const Array2 = ref();
const Array3 = ref();
const Ranking = [
  {
    value: "Option1",
    label: "按年",
  },
  {
    value: "Option2",
    label: "按季",
  },
  {
    value: "Option3",
    label: "按月",
  },
];

// 对话框
const dialogVisible = ref(false);

onMounted(() => {
  whole();
});

const props = { multiple: true, checkStrictly: true };

domData.forEach((aaa) => {
  diquArr.value.push(aaa);
});

options = domData.filter((item) => item.parent === 100000);
domData.forEach((item) => {
  Reflect.set(item, "value", item.label);
});

options.forEach((element) => {
  children2 = domData.filter((word) => element.adcode == word.parent);
  Reflect.set(element, "children", children2);
  // children2.forEach((ele) => {
  //     children3 = domData.filter((word) => ele.adcode == word.parent);
  //     Reflect.set(ele, "children", children3);
  // });
});

let state = reactive({
  newList: [],
  newArr: [],
  optionsArr: [],
  children2Arr: [],
  children3Arr: [],
});

const recognize6 = (value) => {
  console.log(value);

  state.newList = [];
  state.newArr = [];
  state.optionsArr = [];
  state.children2Arr = [];
  state.children3Arr = [];
  from.leave = [];
  from.market = [];
  from.quarter = [];
  proPtions.value.forEach((i) => {
    i.forEach((l) => {
      state.newList.push(l);
    });
  });
  diquArr.value.forEach((j) => {
    state.newList.filter((words) => {
      if (j.label == words) {
        state.newArr.push(j);
      }
    });
  });
  state.newArr = Array.from(new Set(state.newArr));
  options.forEach((j1) => {
    state.newArr.filter((words) => {
      if (j1.adcode == words.adcode) {
        state.optionsArr.push({
          id: j1.adcode,
          name: j1.label,
        });
      }
      return;
    });
  });
  options.forEach((element) => {
    children2 = domData.filter((word) => element.adcode == word.parent);
    children2.forEach((ele) => {
      state.newArr.filter((words1) => {
        if (ele.adcode == words1.adcode) {
          state.children2Arr.push({
            id: ele.adcode,
            name: ele.label,
          });
        }
      });
      children3 = domData.filter((word) => ele.adcode == word.parent);
      children3.forEach((lll) => {
        state.newArr.filter((words2) => {
          if (lll.adcode == words2.adcode) {
            state.children3Arr.push({
              id: lll.adcode,
              name: lll.label,
            });
          }
        });
      });
    });
  });
  from.leave = Array.from(new Set(state.optionsArr));
  from.market = Array.from(new Set(state.children2Arr));
  from.quarter = Array.from(new Set(state.children3Arr));
  console.log(from.leave);
};

// 函数
function whole() {
  a();
  a1();
  a2();
  Bar2();
  abc();
  DataOverview(); //数据概览
  money(); //柱形图3
  Total(); //各类采购商成交总金额分布
}

// 查询
const souSearch = () => {
  whole();
  // from.pinpai = "";
};

// 搜索
const fenxi = () => {
  recognize6();
  whole();
  // from.product_name = "";
};

// 产品大数据分析 展开折叠
const aaShow = ref(true) as any;
const show = () => {
  if (aaShow.value == true) {
    aaShow.value = false;
  } else if (aaShow.value == false) {
    aaShow.value = true;
  }
};

// 按照年，月，日等不同时间范围选择，加载echarts图报表
// const options = [] as any;

// 地区
// domData.forEach((element) => {
//   if (element.level == "province") {
//     options.push({
//       adcode: element.adcode,
//       label: element.label,
//       children: [],
//     });
//   }
// });

// 时间
const recognize7 = (value) => {
  const dateObject1 = new Date(value[0]);
  let seconds1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(value[1]);
  let seconds2 = Math.floor(dateObject2.getTime() / 1000);
  radio1.value.times[0] = {
    oneTime: seconds1,
    twoTime: seconds2,
  };
};

//采购商排行
function abc() {
  MarketPurchaser(from).then((res) => {
    data.value = res.data.data;
  });

  //供应商排行
  MarketSupplier(from).then((res) => {
    data1.value = res.data.data;
  });

  MarketAgency(from).then((res) => {
    data2.value = res.data.data;
  });

  // 采购商排行2
  salesanalysisPurchaser(from).then((res) => {
    data3.value = res.data.data;
  });
  // 供应商销量2
  salesanalysisPNumber(from).then((res) => {
    data4.value = res.data.data;
  });
}
//采购商数据 模拟
let biddingBoos = ref([
  {
    id: "1",
    name: "国有企业",
  },
  {
    id: "2",
    name: "通讯运营商",
  },
  {
    id: "3",
    name: "军队",
  },
  {
    id: "4",
    name: "银行",
  },
  {
    id: "5",
    name: "证券",
  },
  {
    id: "6",
    name: "保险",
  },
  {
    id: "7",
    name: "民营企业",
  },
  {
    id: "8",
    name: "医院",
  },
  {
    id: "9",
    name: "政府及事业单位",
  },
  {
    id: "10",
    name: "学校",
  },
  {
    id: "11",
    name: "其他",
  },
]);

// 搜索范围 模拟
const realm = ref([
  {
    id: "1",
    name: "产品",
  },
  {
    id: "2",
    name: "标题",
  },
  {
    id: "3",
    name: "品牌",
    disabled: "disabled",
  },
  {
    id: "4",
    name: "招标公司",
  },
  {
    id: "5",
    name: "中标公司",
  },
  {
    id: "6",
    name: "代理公司",
  },
  {
    id: "7",
    name: "全文",
  },
]);

//匹配模式 模拟
const Match = ref([
  {
    id: "1",
    name: "智能匹配",
  },
  {
    id: "2",
    name: "精准匹配",
  },
  {
    id: "3",
    name: "模糊匹配",
  },
]);

// 包含词 //排除词 模拟
const byword = ref([
  {
    id: "1",
    name: "产品",
  },
  {
    id: "2",
    name: "标题",
  },
  {
    id: "3",
    name: "品牌",
    disabled: "disabled",
  },
  {
    id: "4",
    name: "招标公司",
  },
  {
    id: "5",
    name: "中标公司",
  },
  {
    id: "6",
    name: "投标公司",
  },
  {
    id: "7",
    name: "全文",
    disabled: "disabled",
  },
]);

// 数据概览
function DataOverview() {
  // 数据概览 接口

  salesanalysisOverview(from).then((res) => {
    numData.value = res.data.data.caigou_num;
    numData1.value = res.data.data.gongyingshang_num;
    numData2.value = res.data.data.caigoushang_num;
    numData4.value = res.data.data.pinpai_num;
    // numData3.value = res.data.data.transaction_price;
    numData3.value =
      (res.data.data.transaction_price.value / 100000000).toFixed(1) + "";
    // console.log(
    //   (res.data.data.transaction_price.value / 100000000).toFixed(2) + "亿元"
    // );
  });
  salesanalysisOverview1(from).then((res) => {
    numDatas.value = res.data.data.caigou_num;
    numDatas3.value =
      (res.data.data.caigou_price.value / 100000000).toFixed(1) + "";
    numDatas4.value = res.data.data.pinpai_num;
    numDatas1.value = res.data.data.gongyingshang_num;
    numDatas2.value = res.data.data.caigoushang_num;

    // numDatas.value = res.data.data.caigoushang_num;
    // numDatas1.value = res.data.data.gongyingshang_num;
    // numDatas2.value = res.data.data.transaction_num;
    // numData3.value = res.data.data.transaction_price;

    // console.log(
    //   (res.data.data.transaction_price.value / 100000000).toFixed(2) + "亿元"
    // );
  });
  //品牌销量
  MarketPin({ product_name: from.product_name }).then((res) => {
    // console.log(res, "品牌销量");
    data5.value = res.data.data;
  });
}

// 柱形图 市场规模
function init() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main"));

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "7%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: mapDataTime.value,
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
          // formatter: function (value, index) {
          //   var value;
          //   if (value >= 1000 && value < 10000) {
          //     value = value / 1000 + "k";
          //   } else if (value >= 10000) {
          //     value = value / 10000 + "M";
          //   } else if (value < 1000) {
          //     value = value;
          //   }
          //   return value;
          // },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: a.maxValue,
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          // formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
          formatter: function (value, index) {
            if (value >= 100000000) {
              return value / 100000000 + "亿";
            } else if (value >= 10000) {
              return value / 10000 + "万";
            } else {
              return value;
            }
          },
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#a9b1be",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: mapDatajg.value,
        barWidth: "22px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#6675FF",
          barBorderRadius: [2, 2, 0, 0],
        },
      },

      {
        type: "bar",
        data: mapData.value,
        barWidth: "22px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#FFB430",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };

  Chart.setOption(options);
  onUnmounted(() => {
    Chart.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart.resize();
  });
}
// 请求接口 柱形图 市场规模
function a() {
  MarketSize(from).then((res) => {
    // console.log(11111, res);
    const responseData = [...res.data.data];
    mapData.value = responseData.map((item) => item.caigou_num);
    mapDatajg.value = responseData.map((item) => Math.floor(item.jg / 10000));
    const abs = responseData;
    let maxValue = abs[0].jg;
    let minValue = abs[0].caigou_num;
    abs.forEach((element) => {
      if (element.jg > maxValue) {
        maxValue = element.jg;
      }
      if (element.jg < minValue) {
        minValue = element.caigou_num;
      }
    });
    // console.log("最大值市场规模: " + maxValue);
    // console.log("最小值市场规模: " + minValue);
    mapDataTime.value = responseData.map((item) => item.key);
    init();
  });
}

// 柱形图 市场供需数量
function init1() {
  // 基于准备好的dom，初始化echarts实例
  let Chart1 = echarts.init(document.getElementById("main1"));

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "7%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: mapDataTime1.value,
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: Bar2.maxValue,
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#a9b1be",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: mapDatajg1.value,
        barWidth: "22px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#6675FF",
          barBorderRadius: [2, 2, 0, 0],
        },
      },

      {
        type: "bar",
        data: mapData1.value,
        barWidth: "22px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#FE8D03",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };

  // 渲染图表
  Chart1.setOption(options);
  onUnmounted(() => {
    Chart1.dispose();
  });

  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart1.resize();
  });
}

// 请求接口 柱形图 市场供需数量
function Bar2() {
  MarketNum(from).then((res) => {
    const responseData1 = [...res.data.data];
    mapData1.value = responseData1.map((item) => item.xmdh_num);
    mapDatajg1.value = responseData1.map((item) => item.zbdw_num);
    mapDataTime1.value = responseData1.map((item) => item.key);
    const abs = responseData1;
    let maxValue = abs[0].xmdh_num;
    let minValue = abs[0].zbdw_num;
    abs.forEach((element) => {
      if (element.xmdh_num > maxValue) {
        maxValue = element.xmdh_num;
      }
      if (element.xmdh_num < minValue) {
        minValue = element.zbdw_num;
      }
    });
    // console.log("最大值市场规模: " + maxValue);
    // console.log("最小值市场规模: " + minValue);
    // console.log(responseData1);
    init1();
  });
}

// 饼图 各类采购商采购次数占比
function num(resPie) {
  // 基于准备好的dom，初始化echarts实例
  let Chart2 = echarts.init(document.getElementById("Pie"));

  // 绘制图表
  let options = {
    title: {
      text: "",
      subtext: "",
      bottom: "bottom",
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "20px",
      bottom: -5,
      // top: "20px",
    },
    grid: {
      top: 0, //生成的图片和顶部的间距

      containLabel: true, //为ture才会生效
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: resPie,
        center: ["50%", "38%"],
        bottom: 0, // 将图例放置在图表下方
        label: {
        show: true,
        formatter:function (value) {
          return money1(value.value)
        }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  Chart2.setOption(options);
  onUnmounted(() => {
    Chart2.dispose();
  });

  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart2.resize();
  });
}

// 请求接口 饼图 各类采购商采购次数占比
function a1() {
  MarketProportion(from).then((res) => {
    tableData.value = res.data.data;
    let resPie = [] as any;
    res.data.data.map((item) => {
      resPie.push({ value: item.doc_count, name: item.key });
    });
    // console.log(resPie);
    num(resPie);
    Amount(resPie);
  });
}

// 饼图 各类采购商采购金额占比
function num1(resPie1) {
  // 基于准备好的dom，初始化echarts实例
  let Chart2 = echarts.init(document.getElementById("Pie1"));

  // 绘制图表
  let options = {
    title: {
      text: "",
      subtext: "",
      left: "center",
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "20px",
      bottom: -5,
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: resPie1,
        center: ["50%", "50%"],
        bottom: 0, // 将图例放置在图表下方
        label: {
        show: true,
        formatter:function (value) {
          return money1(value.value)
        }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  Chart2.setOption(options);
  onUnmounted(() => {
    Chart2.dispose();
  });

  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart2.resize();
  });
}

// 请求接口  饼图 各类采购商采购金额占比
function a2() {
  MarketMoney(from).then((res) => {
    tableData1.value = res.data.data;
    let resPie1 = [] as any;
    res.data.data.map((item) => {
      resPie1.push({ value: item.color_sum_price, name: item.key });
    });
    num1(resPie1);
    num2(resPie1);
    AmountNum(resPie1);
  });
}

// 饼图 各类采购商采购金额占比
function num2(resPie) {
  // 基于准备好的dom，初始化echarts实例
  let Chart2 = echarts.init(document.getElementById("Pie2"));

  let options = {
    title: {
      text: "",
      subtext: "",
      bottom: "bottom",
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "20px",
      bottom: 80,
    },
    grid: {
      top: 0, //生成的图片和顶部的间距

      containLabel: true, //为ture才会生效
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: resPie,
        center: ["50%", "42%"],
        bottom: 0, // 将图例放置在图表下方
        label: {
        show: true,
        formatter:function (value) {
          return money1(value.value)
        }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  Chart2.setOption(options);
  onUnmounted(() => {
    Chart2.dispose();
  });

  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart2.resize();
  });
}

//地区切换
const cityChange = () => {
  DataOverview();
};

//柱形图 成交总金额趋势
function zhexian() {
  // 基于准备好的dom，初始化echarts实例
  let C = echarts.init(document.getElementById("zhexian"));

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "7%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: mapDataTime2.value,
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: money.maxValue,
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#a9b1be",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: mapDatajg2.value,
        barWidth: "22px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#56b89f",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };

  // 渲染图表
  C.setOption(options);
  onUnmounted(() => {
    C.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    C.resize();
  });
}

// 请求接口 柱形图 成交总金额趋势
const money = () => {
  salesanalysisMoney(from).then((res) => {
    const responseData2 = [...res.data.data];
    mapDatajg2.value = responseData2.map((item) => Math.floor(item.jg / 10000));
    mapDataTime2.value = responseData2.map((item) => item.key);
    const abs = responseData2;
    // console.log(abs);
    let maxValue = abs[0].jg;
    abs.forEach((element) => {
      if (element.jg > maxValue) {
        maxValue = element.jg;
      }
    });
    // console.log("最大值成交总金额趋势: " + maxValue);
    zhexian();
  });
};

// 饼图 主要品牌成交总金额占比
function Amount(resPie) {
  // 基于准备好的dom，初始化echarts实例
  let Chart2 = echarts.init(document.getElementById("Amount"));

  // 绘制图表
  let options = {
    title: {
      text: "",
      subtext: "",
      bottom: "bottom",
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "20px",
      bottom: 80,
    },
    grid: {
      top: 0, //生成的图片和顶部的间距

      containLabel: true, //为ture才会生效
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: resPie,
        center: ["50%", "30%"],
        bottom: 0, // 将图例放置在图表下方
        label: {
        show: true,
        formatter:function (value) {
          return money1(value.value)
        }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  Chart2.setOption(options);
  onUnmounted(() => {
    Chart2.dispose();
  });

  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart2.resize();
  });
}

//饼图 主要品牌成交数量占比
function AmountNum(resPie1) {
  // 基于准备好的dom，初始化echarts实例
  let Chart2 = echarts.init(document.getElementById("AmountNum"));

  // 绘制图表
  let options = {
    title: {
      text: "",
      subtext: "",
      bottom: "bottom",
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "20px",
      bottom: 80,
    },
    grid: {
      top: 0, //生成的图片和顶部的间距

      containLabel: true, //为ture才会生效
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: resPie1,
        center: ["50%", "30%"],
        bottom: 0, // 将图例放置在图表下方
        label: {
        show: true,
        formatter:function (value) {
          return money1(value.value)
        }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  Chart2.setOption(options);
  onUnmounted(() => {
    Chart2.dispose();
  });

  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart2.resize();
  });
}

//饼图 各类采购商成交总金额分布
function Number(resPie3) {
  // 基于准备好的dom，初始化echarts实例
  let Chart2 = echarts.init(document.getElementById("Number"));

  // 绘制图表
  let options = {
    title: {
      text: "",
      subtext: "",
      left: "center",
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "20px",
      bottom: "100px",
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: resPie3,
        bottom: 0, // 将图例放置在图表下方
        label: {
        show: true,
        formatter:function (value) {
          return money1(value.value)
        }
        },
        center: ["50%", "30%"],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  Chart2.setOption(options);
  onUnmounted(() => {
    Chart2.dispose();
  });

  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart2.resize();
  });
}

// 请求接口 饼图 各类采购商成交总金额分布
function Total() {
  salesanalysisTotalamount(from).then((res) => {
    // console.log(";;; ", res);
    let resPie3 = [] as any;
    res.data.data.map((item) => {
      resPie3.push({ value: item.color_sum_price, name: item.key });
    });
    Number(resPie3);
    // console.log(resPie3);
  });
}

// 采购商跳详情
const Purchaserinfo = (row) => {
  // if (token) {
  // } else {
  //   ElMessage.error("请您先登录,登录成功之后才能查看详情");
  // }
  const href = router.resolve({
    path: "/disposition",
    query: {
      id: 2,
      name: row,
    },
  });
  window.open(href.href, "_blank");
};

//供应商排行详情
const Supplierinfo = (row) => {
  // if (token) {
  // } else {
  //   ElMessage.error("请您先登录,登录成功之后才能查看详情");
  // }
  const href = router.resolve({
    path: "/disposition",
    query: {
      id: 3,
      name: row,
    },
  });
  window.open(href.href, "_blank");
};

// 招标代理机构排行详情
const Agencyinfo = (row) => {
  // if (token) {
  // } else {
  //   ElMessage.error("请您先登录,登录成功之后才能查看详情");
  // }
  const href = router.resolve({
    path: "/disposition",
    query: {
      id: 7,
      name: row,
    },
  });
  window.open(href.href, "_blank");
};

const productTiao = () => {
  if (router.currentRoute.value.query.name != undefined) from.product_name = router.currentRoute.value.query.name
}
productTiao()

</script>

<style lang="scss" scoped>
:deep(.el-tabs__item) {
  padding-left: 20px !important;
  height: 56px;
  font-size: 16px;
  /* 调整标题的位置 */
}

// 搜索按钮
.mr10 {
  background-color: #f43107;
  border: 0;
}

.EZ {
  width: 100%;
  height: 100%;
}

.search_input {
  width: 850px;
  height: 60px;
  background: #ffffff;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
}

// 搜索 按钮
.btnn {
  width: 120px;
  height: 56px;
  border-radius: 50px;
  background: #f43107;
  border: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  position: absolute;
  right: 1px;
  top: 2px;
}

// 输入框
.inputt {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50px;
  outline: none;
  padding-left: 20px;
}

:deep(.el-menu--horizontal > .el-menu-item) {
  width: 120px !important;
}

:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title) {
  width: 152px !important;
}

.topBanner {
  width: 100%;
  margin: 0 auto;
  height: 154px;
  background-image: url(../../assets/newimg/search.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 545px;
    // margin-top: 16px;
    font-size: 22px;
    font-weight: 400;
    line-height: 0;
    color: #ffffff;
  }

  .search_button {
    width: 100vw;
    height: 154px;

    // margin: 0 auto;
    // position: relative;
    .p {
      width: 188px;
      height: 22px;
      font-size: 22px;
      font-weight: 400;
      color: #ffffff;
      margin-top: 26px;
      box-sizing: border-box;
    }

    .searchAuto {
      width: 850px;
      height: 60px;
      margin: 0 auto;

      input {
        border: 0;
        outline: none;
        padding-left: 20px;
        border-radius: 50px;
      }
    }

    .search_btn {
      width: 120px;
      height: 56px;
      background: #f43107;
      margin-top: 10px;
      border-radius: 50px;
      border: 0;
      line-height: 56px;
      text-align: center;
      cursor: pointer;

      img {
        margin-bottom: 5px;
        width: 21px;
        height: 21px;
        margin-right: 4px;
      }
    }
  }
}

.echarts {

  //产品大数据分析
  .Data {
    width: 1200px;
    // height: 122px;
    background: #ffffff;
    // border: 1px solid #80e9;
    margin: 0 auto;
    margin-top: 10px;
    padding-bottom: 20px;

    .top {
      padding-top: 20px;
      padding-left: 20px;

      // display: flex;
      // justify-content: space-between;
      .df {
        .text {
          width: 126px;
          height: 18px;
          font-family: MF LiHei (Noncommercial);
          font-weight: bold;
          font-size: 18px;
          color: #333333;
          line-height: 20px;
        }
      }

      img {
        width: 26px;
        height: 26px;
      }
    }
  }

  // 中招标分析
  .analysis {
    width: 1200px;
    height: 56px;
    background: #ffffff;
    // border: 1px solid #80e9;
    margin: 0 auto;
    margin-top: 10px;
    // padding-left: 10px;
  }

  //数据概览
  .overview {
    width: 1200px;
    height: 216px;
    background: #ffffff;
    // border: 1px solid #80e9;
    // margin: 0 auto;
    margin: 0 auto;
    margin-top: 10px;

    .bacBox {
      display: flex;

      .baCorder {
        width: 220px;
        height: 120px;
        background: url(../../assets/img/1.1.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;

        .cart {
          padding: 20px 0 20px 20px;
          font-size: 16px;
          color: #fff;
        }

        .num {
          font-size: 30px;
          color: #fff;
          padding: 10px 0 0 20px;
        }
      }

      .bacBillion {
        width: 202px;
        height: 120px;
        background: url(../../assets/img/2.2.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;

        .cart {
          padding: 20px 0 20px 20px;
          font-size: 16px;
          color: #fff;
        }

        .num {
          font-size: 30px;
          color: #fff;
          padding: 10px 0 0 20px;
        }
      }

      .bacInd {
        width: 202px;
        height: 120px;
        background: url(../../assets/img/3.3.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;

        .cart {
          padding: 20px 0 20px 20px;
          font-size: 16px;
          color: #fff;
        }

        .num {
          font-size: 30px;
          color: #fff;
          padding: 10px 0 0 20px;
        }
      }

      .bacfamily1 {
        width: 202px;
        height: 120px;
        background: url(../../assets/img/4.4.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;

        .cart {
          padding: 20px 0 20px 20px;
          font-size: 16px;
          color: #fff;
        }

        .num {
          font-size: 30px;
          color: #fff;
          padding: 10px 0 0 20px;
        }
      }

      .bacfamily2 {
        width: 202px;
        height: 120px;
        background: url(../../assets/img/5.5.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;

        .cart {
          padding: 20px 0 20px 20px;
          font-size: 16px;
          color: #fff;
        }

        .num {
          font-size: 30px;
          color: #fff;
          padding: 10px 0 0 20px;
        }
      }
    }
  }

  // 市场规模
  .scale {
    width: 1200px;
    height: 480px;
    background: #ffffff;
    // border: 1px solid #80e9;
    margin: 0 auto;
    margin-top: 10px;
  }

  // 市场供需数量
  .scale1 {
    width: 1200px;
    height: 480px;
    background: #ffffff;
    // border: 1px solid #80e9;
    margin-top: 10px;
  }

  //市场地域分布
  .translate {
    width: 1200px;
    height: 700px;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 10px;
    padding-top: 50px;

    // border: 1px solid #80e9;
    .Map_box {
      width: 100%;
      display: flex;
      margin-top: 20px;

      .map {
        width: 65%;
      }

      .zhan {
        // width: 35%;
        margin-right: 10px;
      }
    }
  }

  // 各类采购商采购次数占比大盒子
  .numberBox {
    width: 1200px;
    display: flex;
    margin: 10px;
    margin: 110px auto;

    // 各类采购商采购次数占比
    .left_bing {
      width: 595px;
      height: 550px;
      background: #ffffff;
    }

    // 各类采购商采购金额占比
    .right_bing {
      width: 595px;
      height: 550px;
      background: #ffffff;
      // border: 1px solid #80e9;
      margin-left: 10px;
    }
  }

  // 主要品牌分布大盒子
  .numberBox1 {
    width: 1200px;
    display: flex;
    margin: 10px;
    margin: 0 auto;
    margin-top: 10px;

    // 主要品牌分布
    .left_bing {
      width: 595px;
      height: 550px;
      // border: 1px solid #80e9;
      background: #ffffff;
      // margin-left: 350px;
    }

    // 品牌销量
    .right_bing {
      width: 595px;
      height: 550px;
      background: #ffffff;
      // border: 1px solid #80e9;
      margin-left: 10px;
    }
  }

  .nBox {
    width: 1200px;
    display: flex;
    margin: 10px;
    margin: 10px auto;

    // 各类采购商采购次数占比
    .left_bing {
      width: 595px;
      height: 550px;
      background: #ffffff;
    }

    // 各类采购商采购金额占比
    .right_bing {
      width: 595px;
      height: 550px;
      background: #ffffff;
      // border: 1px solid #80e9;
      margin-left: 10px;
    }
  }

  // 采购商排行大盒子
  .Purchaser {
    width: 1200px;
    display: flex;
    margin-top: 15px;
    margin: 0 auto;

    .left_1 {
      width: 390px;
      height: 650px;
      background: #ffffff;
      // border: 1px solid #80e9;
    }

    .center_1 {
      width: 390px;
      height: 650px;
      // border: 1px solid #80e9;
      background: #ffffff;
      margin-left: 15px;
    }

    .right_1 {
      width: 390px;
      height: 650px;
      // border: 1px solid #80e9;
      background: #ffffff;
      margin-left: 15px;
    }
  }
}

.xian {
  width: 4px;
  height: 16px;
  background: #f43107;
  margin-left: 15px;
  border-radius: 10px;
  margin-top: 2px;
}

.text {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  margin-left: 10px;
}

//tabs 标签页
:deep(.el-tabs__nav-wrap::after) {
  background-color: transparent;
}

// :deep(.el-tabs__item) {
//   padding: 28px 20px !important;
// }

:deep(.el-tabs__active-bar) {
  background-color: #f43107;
}

:deep(.el-tabs__item.is-active) {
  color: #f43107;
  font-weight: bold;
}

// 表格排行榜
.ranking {
  width: 24px;
  height: 26px;
}

// 排行颜色
.topS {
  width: 24px;
  height: 24px;
  background-color: #bcd2d4;
  color: #fff;
  text-align: center;
  margin-left: 5px;
}

.Top10 {
  width: 67px;
  height: 16px;
  margin-left: 10px;
}

//省略号
.sheng {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.numberBox2 {
  width: 1200px;
  display: flex;
  margin: 10px;
  margin: 0 auto;
  margin-top: -50px;

  // 主要品牌分布
  .left_bing {
    width: 595px;
    height: 550px;
    background: #ffffff;
  }

  // 品牌销量
  .right_bing {
    width: 595px;
    height: 550px;
    background: #ffffff;
    // border: 1px solid #80e9;
    margin-left: 10px;
  }
}

footer {
  padding-top: 3500px;
}

// 分页

.el-pagination {
  justify-content: center;
}

.el-dialog {
  border-radius: 20px;
}
.ico{
  width: 16px;
  height: 16px;
  margin-right: 4px;
  img{
    width: 100%;
    height: 100%;
   
  }
}
.custom-tabs-label{
  display: flex;
}
:deep(.el-tabs__item :hover){
  color: red;
}
:deep(.el-tabs__nav :hover){
  color: red;
}
:deep(.left_bing .el-tabs__item){
height: 36px !important;
}
:deep(.right_bing ){
  .el-tabs__item{
    height: 36px !important;
  }

.el-tabs__header{
    height: 36px !important;
border: none;
  }

.el-tabs__nav{
border-bottom: 1px solid #eee;
border-top: none;
}
}
:deep(.left_bing ){
  .el-tabs__header{
    height: 36px !important;
border: none;
  }

.el-tabs__nav{
border-bottom: 1px solid #eee;
border-top: none;
}
}
</style>
